<!--
 * @Author:  kai
 * @Date: 2022-11-21 14:42:23
 * @LastEditTime: 2022-12-13 10:56:35
-->
<template>
    <div v-if="priviewsource" class="container">
          <div class="back_box" @click="handleBacklist()">
              <Icon type="md-arrow-round-back" color="white" :size="20" style="z-index: 999;"  />
          </div>
          <div class="add_Container">
              <div class="head">
                  <div class="title">{{title}}</div>
                  <div class="edit"></div>
              </div>
              <div class="priview_body">
                <Row style="padding-top: 28px;">
                    <!-- Data source name & Description -->
                    <!-- <h3 style="color: red;">{{DataSource.projectId}}</h3> -->
                    <Col :span="6">
                        <div class="lable">*Data source name</div>
                    </Col>
                    <Col :span="6"> 
                        <div class="lable_value columnSize">{{formatterSourceName(DataSource.dataSource)}}</div>
                    </Col>
                    <Col :span="4">
                        <div class="lable">*Description</div>
                    </Col>
                    <Col :span="7">
                        <div class="lable_value">{{DataSource.description}}</div>
                    </Col>
                    <!-- Username & password -->
                    <Col :span="6">
                        <div class="lable">User name</div>
                    </Col>
                    <Col :span="6"> 
                        <div class="lable_value columnSize">{{DataSource.userName}}</div>
                    </Col>
                    <Col :span="4">
                        <div class="lable">Password</div>
                    </Col>
                    <Col :span="7">
                        <div class="lable_value">{{DataSource.passwords == ''? '':'****************'}}</div>
                    </Col>
                   <!-- Type & Host -->
                    <Col :span="6">
                        <div class="lable">*Type</div>
                    </Col>
                    <Col :span="6"> 
                        <div class="lable_value columnSize">{{DataSource.eType}}</div>
                    </Col>
                    <Col :span="4">
                        <div class="lable"> {{DataSource.eType === 'MQTT' ? '*Host':'Host'  }}</div>
                    </Col>
                    <Col :span="7">
                        <div class="lable_value">{{DataSource.host}}</div>
                    </Col>
                    <template v-if="DataSource.eType === 'MQTT'">
                        <!-- Port number & Topics -->
                        <Col :span="6">
                            <div class="lable">*Port number</div>
                        </Col>
                        <Col :span="6"> 
                            <div class="lable_value columnSize">{{DataSource.port}}</div>
                        </Col>
                        <Col :span="6">
                            <div class="lable">*Topics</div>
                        </Col>
                        <Col :span="6"> 
                            <div class="lable_value columnSize">{{DataSource.topic}}</div>
                        </Col>
                    
                        <!-- Source location & Data decryption  -->
                        <Col :span="4">
                            <div class="lable">*Source location</div>
                        </Col>
                        <Col :span="8">
                            <div class="lable_value ">{{DataSource.sorceLocaltion}}</div>
                        </Col>
                        <Col :span="4">
                            <div class="lable">Data decryption</div>
                        </Col>
                        <Col :span="8">
                            <div class="upload">
                                <div class="lable_value">
                                    <div class="green" v-if="DataSource.dataDecryption">YES</div>
                                    <div class="red" v-else>NO</div>
                                </div>
                                <div class="lable_value uploadjsx" v-if="DataSource.dataDecryption">Please upload certificate (.pem.pfx.crt)</div>
                            </div>
                        </Col>
                    </template>
                    <template v-if="DataSource.eType === 'API'">
                        <!-- Port number & Topics -->
                        <Col :span="6">
                            <div class="lable">*Client ID</div>
                        </Col>
                        <Col :span="6"> 
                            <div class="lable_value columnSize">{{DataSource.clientID}}</div>
                        </Col>
                        <Col :span="6">
                            <div class="lable">Client Secret</div>
                        </Col>
                        <Col :span="6"> 
                            <div class="lable_value columnSize">{{DataSource.clientSecret}}</div>
                        </Col>
                    
                        <!-- Source location & Data decryption  -->
                        <Col :span="4">
                            <div class="lable">* Access Token</div>
                        </Col>
                        <Col :span="8">
                            <div class="lable_value ">{{DataSource.accessToken}}</div>
                        </Col>
                    </template>
                    <!--  -->
                    <Col :span="6">
                        <div class="lable">Enabled</div>
                    </Col>
                    <Col :span="6"> 
                        <div class="lable_value enabled">
                            <RadioGroup v-model="DataSource.enabled" type="button" button-style="solid" >
                                <Radio  label="true" :disabled="DataSource.enabled == 'true' ? false : true "></Radio>
                                 <span class="false_choise">
                                    <Radio  label="false" :disabled="DataSource.enabled == 'false' ? false : true " ></Radio>
                                 </span> 
                        </RadioGroup>
                        </div>
                    </Col>
                </Row>
              </div>
          </div>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
          title:"Preview",
          Sourceid:"",
          priviewsource:false,
          password:"1111111111111111",
          DataSource:{},
      }
    },
    methods:{
      handleopen(id){
          this.priviewsource = true
          this.GetPreviewByid(id);
      },
      /** 返回list列表 */
      handleBacklist(){
          this.priviewsource = false;
          this.$emit("handleshow",true)
      },
    //格式化dataSourcename
    formatterSourceName(name){
       if( name.length >= 10 ){
        let newName = name.slice(0,10)+'...'
            return newName;
        }else{
            return name
        }
    },
    /** 根据id获取预览信息 */
      GetPreviewByid(id){
      const url = ROUTER.LoraWan2DBConfig.operate +`/${id}`
      this.$http.get(url).then(res => {
        console.log('----------------------- GetPreviewByid -----------------------')
        if(res.data.isSuccess){
            console.log(res)
            this.DataSource = res.data.data
            console.log(this.DataSource)
            this.DataSource.enabled = this.DataSource.enabled.toString();
        }
      })
      }
    },
  }
  </script>
  <style scoped lang="less">
  .container {
      .back_box {
          width: 32px;
          height: 32px;
          background-color: #000000;
          margin-left: 20px;
          margin-bottom: 16px;
          text-align: center;
          line-height: 32px;
      }
      .add_Container{
      width: 97%;
      margin-left: 20px;
      display: flex;
      flex-direction: column;
      background: linear-gradient(180deg, rgba(20, 49, 46, 0.95) 17.25%, rgba(46, 64, 62, 0.45) 122.26%);
      padding: 20px 28px 0 24px;
      .head {
          display: flex;
          justify-content: space-between;
          color: white;
          // height: 5%;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          padding: 15px 28px 20px 16px;
          .title {
              width: 126px;
              height: 23px;
              font-weight: 700;
              font-size: 16px;
              line-height: 23px;
          }
      }
      .priview_body{
        .ivu-col-span-6 {
            padding-bottom: 35px;
        }
        .upload {
            display: flex;
        }
        .lable {
                font-weight: 400;
                font-size: 16px;
                line-height: 23px;
                color: #B3B3B3;
            }
            .lable_value{
                color: #FAFAFA;
                margin-left: 14px;
                .green {
                display: inline-block;
                width: 52px;
                height: 20px;
                font-size: 14px;
                font-weight: 500;
                background: rgba(34, 255, 229, 0.2);
                border-radius: 2px;
                text-align: center;
                line-height: 20px;
                color: #22FFE5;
                }
                .red {
                display: inline-block;
                width: 52px;
                height: 20px;
                font-size: 14px;
                font-weight: 500;
                background-color: rgba(249,100,53,0.3);
                border-radius: 2px;
                text-align: center;
                line-height: 20px;
                color: #F96435;
                }
            }
            .enabled {
                margin-left: -90px;
                .ivu-radio-group-button-solid .ivu-radio-wrapper-checked:not(.ivu-radio-wrapper-disabled){
                background: #22FFE5 !important;
                color: #08141D;
            }
            
            .ivu-radio-group-button-solid .false_choise .ivu-radio-wrapper-checked:not(.ivu-radio-wrapper-disabled){
                background: gray !important;
                color: #08141D;
            }
            .ivu-radio-group-button {
                background-color: black !important;
                border-radius: 10px;
                padding: 5px;
            }
            .ivu-radio-group-button .ivu-radio-wrapper {
                background: black !important;
                border: none !important;
                border-radius: 10px;
                width: 72px;
                height: 15px;
                font-size: 0;
            }
            .ivu-radio-group-button .ivu-radio-wrapper-checked:first-child{
                border-color: none !important;
            }
            }
            .columnSize {
                margin-left: -90px;
            }
            .uploadjsx {
                color: #22FFE5;
            }  
            .lable_value::before{
                content: "";
                width: 0px;
                margin-right: 18px;
                height: 12px;
                border: 1px solid #2C4643;
            }
      }
  
  }
  }
  
  </style>
  